<template>
  <div id="title-box">
    <div class="box-title">
      <span>热门公司</span>
      <div class="city-wrap"></div>
      <!-- 清除浮动 -->
      <div style="clear: both"></div>
    </div>
    <!-- 面包屑 -->
    <div class="position-type">
      <ul>
        <li v-for="company in company.zpData" :key="company.id" :class="{ active: company.id == cityId - 1 }"
          @click="gain(company.id)">
          {{ company.name }}
        </li>
      </ul>
    </div>
    <!-- 内容 -->
    <div class="position-list">
      <ul>
        <li>
          <div class="sub-li">
            <img src="./images/腾讯.jpg" alt="腾讯">
            <p class="gsmz">腾讯</p>
            <p>
              <span>不需要融资</span>
              <span class="vline"></span>
              <span>互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>422</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/阿里巴巴.jpg" alt="阿里巴巴">
            <p class="gsmz">阿里巴巴</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>1037</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/字节跳动.png" alt="今日头条">
            <p class="gsmz">今日头条</p>
            <p>
              <span>未融资</span>
              <span class="vline"></span>
              <span>移动互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>581</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/华为.png" alt="华为">
            <p class="gsmz">华为</p>
            <p>
              <span>不需要融资</span>
              <span class="vline"></span>
              <span>计算机软件</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>2115</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/哔哩哔哩.jpg" alt="哔哩哔哩">
            <p class="gsmz">哔哩哔哩</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>141</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/百度.jpg" alt="百度">
            <p class="gsmz">百度</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>664</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/蚂蚁金服.png" alt="蚂蚁金服">
            <p class="gsmz">蚂蚁金服</p>
            <p>
              <span>未融资</span>
              <span class="vline"></span>
              <span>互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>318</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/京东.jpg" alt="京东集团">
            <p class="gsmz">京东集团</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>电子商务</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>388</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/网易.jpg" alt="网易">
            <p class="gsmz">网易</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>移动互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>275</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/字节跳动.png" alt="字节跳动">
            <p class="gsmz">北京字节跳动</p>
            <p>
              <span>D轮及以上</span>
              <span class="vline"></span>
              <span>移动互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>843</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/小米.jpg" alt="小米">
            <p class="gsmz">小米</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>376</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/快手.jpg" alt="快手">
            <p class="gsmz">快手</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>社交网络</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>448</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/华为.png" alt="华为技术有限公司">
            <p class="gsmz">华为技术有限公司</p>
            <p>
              <span>不需要融资</span>
              <span class="vline"></span>
              <span>计算机软件</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>1322</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/BOSS直聘.jpg" alt="BOSS直聘">
            <p class="gsmz">BOSS直聘</p>
            <p>
              <span>已上市</span>
              <span class="vline"></span>
              <span>人力资源服务</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>648</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/小红书.png" alt="小红书科技">
            <p class="gsmz">小红书科技</p>
            <p>
              <span>D轮及以上</span>
              <span class="vline"></span>
              <span>互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>0</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
        <li>
          <div class="sub-li">
            <img src="./images/滴滴.png" alt="滴滴">
            <p class="gsmz">滴滴</p>
            <p>
              <span>D轮及以上</span>
              <span class="vline"></span>
              <span>移动互联网</span>
            </p>
            <a href="javascript:;" class="about-info">
              <p>
                <span>420</span>
                个热招职位
              </p>
            </a>
          </div>
        </li>
      </ul>
    </div>
    <!-- 查看更多 -->
    <div class="common-more">
      <router-link to="/">查看更多</router-link>
    </div>
  </div>
</template>

<script>
// 引入热门公司数据
import { reqGetHotCompany } from "@/zwapi"
export default {
  name: "BoxTitle",
  data() {
    return {
      company: {},
      cityId: 1,
    }
  },
  methods: {
    gain(id) {
      this.cityId = id
    }
  },
  async mounted() {
    this.company = await reqGetHotCompany()
  }
};
</script>

<style lang="less" scoped>
#title-box {
  width: 1184px;
  margin: 50px auto;

  .box-title {
    height: 42px;

    span {
      float: left;
      font-size: 15px;
      margin-top: 7px;
    }

    .city-wrap {
      float: left;
      margin-left: 10px;
      line-height: 20px;
      margin-top: 7px;

      .text {
        font-size: 13px;
        font-weight: 400;
        color: #19d7c8;
        float: left;
      }
    }
  }

  .position-type {
    ul {
      display: flex;
      flex-wrap: wrap;
      line-height: 35px;

      li {
        width: 90px;
        height: 34px;
        background-color: #fff;
        margin-right: 8px;
        margin-bottom: 16px;
        border-radius: 6px;
        font-size: 13px;
        text-align: center;
        cursor: pointer;
      }

      .active {
        background-color: #5dd5c8;
      }
    }
  }

  .position-list {
    margin-bottom: 20px;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        width: 284px;
        height: 238px;
        background-color: white;
        margin-top: 20px;
        cursor: pointer;

        &:hover {
          box-shadow: 0 0 10px gray;
        }

        &:hover .sub-li .gsmz {
          color: #00c2b3;
        }

        .sub-li {
          width: 244px;
          height: 200px;
          margin: 18px auto;
          overflow: hidden;
          line-height: 30px;

          img {
            display: block;
            width: 58px;
            height: 58px;
            margin: 20px auto;
            margin-bottom: 0;
          }

          .gsmz {
            font-size: 16px;
            text-align: center;
          }

          p {
            font-size: 12px;
            text-align: center;

            .vline {
              display: inline-block;
              width: 1px;
              height: 12px;
              vertical-align: middle;
              background: #e0e0e0;
              margin: 0 10px;
            }
          }

          .about-info {
            display: block;
            width: 180px;
            height: 34px;
            border: 1px solid grey;
            margin: 10px auto;
          }
        }
      }
    }
  }

  .common-more {
    width: 216px;
    height: 34px;
    background-color: #5dd5c8;
    margin: 0 auto;
    line-height: 34px;

    a {
      display: block;
      text-align: center;
      text-decoration: none;
      font-size: 15px;
      color: white;
    }
  }
}
</style>